<template>
  <div>
    <el-card style="margin: 10px 0">
      <div style="display: flex;">
        <div style="width: 300px;">
          <el-image :src="food.img" :preview-src-list="[food.img]" style="width: 100%;height: 100%"></el-image>
        </div>

        <div style="flex: 1;padding-left: 50px">
          <div class="item1"><h3>{{food.name}}</h3></div>
          <div class="item1" style="font-size: 14px">{{food.description}}</div>
          <div class="item1" style="color: orangered;padding: 11px">价格 : ¥  {{food.price}}</div>
          <div class="item1" style="padding: 11px">库存 : {{food.sum}}</div>
          <div class="item1"><el-input-number v-model="form.num" :min="1" :max="food.sum" size="small"/></div>
          <div class="item1" style="margin-top: 30px">
            <el-button style="background-color: red;color: white" @click="addCard"><el-icon><shopping-cart /></el-icon>加入购物车</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import {ShoppingCart} from "@element-plus/icons";

export default {
  name: "Detail",
  components: {
    ShoppingCart
  },
  data() {
    return {
      id: this.$route.query.id,
      food: {},
      form: {num: 1},
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/order/food/getById",{params: {id:this.id}}).then(res => {
        this.food = res.data
      })
    },
    addCard() {
      if(!this.user.name){
        this.$message.warning("请登录后进行操作!")
        return
      }else{
        console.log(this.user)
        this.form.foodId=this.id
        this.form.userId=this.user.id
        request.post("/order/cart/save",this.form).then(res => {
          if(res.code == 200){
            this.$message.success("添加成功");
          }else{
            this.$message.error("添加失败!");
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  .item1 {
    padding: 10px;
    color: #666;
  }
</style>